<script>

import box from '@/mixins/box'

export default {
  name: 'my-goods',
  mixins: [box],
  props: {
    goods: Object,
    selectable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // isSelect: false,
    }
  },
  mounted() {

  },
  methods: {
    updateSelect()  {
      if (this.selectable) {
        this.$emit('updateSelect', {id: this.goods.id, isSelect: !this.goods.isSelect})
      }
    },
  }
}
</script>

<!--
    为啥封装了还有这么多重复代码，
    说明：之前屎山代码不是我写的，福利屋，红包之后是我加的
-->
<template>
  <view
    class="goods-item"
    @click="updateSelect"
    :style="[useLevelBg('item', goods.level_id)]"
  >
    <image
      v-if="selectable"
      class="select"
      :src="'https://www.dingxians.cn/images/common/' + (goods.isSelect ? 'selected' : 'unselected') + '.png'"
    ></image>
    <view
      class="goods-img-bg"
      :style="[useLevelBg('img', goods.level_id)]"
    >
      <image class="goods-img" mode="aspectFit" :src="goods.image"></image>
      <view
        class="level-icon"
        :style="[useLevelBg('icon', goods.level_id)]"
      >
        {{ goods.level_name }}
      </view>
    </view>

    <view class="goods-info">
      <text class="goods-name">{{goods.name}}</text>
      <view class="goods-price">
        ￥{{goods.price}}
        <text class="indicative-price">参考价</text>
      </view>
      <view class="bottom">
        <view class="goods-recovery-price">
          拒提价 : {{goods.price}}
          <image class="gold-icon" src="/static/images/shop/money.png"></image>
        </view>
        <text>x1</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.goods-item {
  display: flex;
  width: 710rpx;
  height: 280rpx;
  align-items: center;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 20rpx 20rpx 20rpx 40rpx;
  margin: 15rpx 0;

  .select {
    width: 32rpx;
    height: 32rpx;
  }

  .goods-img-bg {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 20rpx;

    .goods-img {
      width: 180rpx;
      height: 180rpx;
    }

    .level-icon {
      width: 71rpx;
      height: 28rpx;
      line-height: 28rpx;
      position: absolute;
      background-size: 100% 100%;
      left: 10rpx;
      top: 10rpx;
      font-size: 17rpx;
      box-sizing: border-box;
      padding-left: 30rpx;
      color: white;
    }
  }

  .goods-info {
    flex: 1;
    /*height: 160rpx;*/
    display: flex;
    color: white;
    flex-direction: column;
    justify-content: space-between;
    font-size: 28rpx;

    .goods-name {
      font-size: 32rpx;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-bottom: 10rpx;
    }

    .gold-icon {
      vertical-align: middle;
      width: 32rpx;
      height: 32rpx;
      margin-left: 10rpx;
    }

    .indicative-price {
     /* width: 74rpx;
      height: 30rpx;*/
      padding: 3rpx 5rpx;
      font-size: 22rpx;
      margin-left: 10rpx;
      background-color: rgba(255, 255, 255, 0.3);
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 20rpx;

      .goods-recovery-price {
        color: #ded000;
      }
    }
  }
}
</style>